<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:z="http://pd.softplan.com.br/zion/faces"
   template="/templates/zion-form.xhtml">

	<ui:define name="zion-form-contents">
		<h:outputStylesheet name="css/zion.highlight.css" target="head" />

        <div class="componentUsageExample">
            <h3>Somente texto com label (<code>renderAsOutput=true</code>)</h3>
            <span class="status success" />
            <z:text id="text0a" label="Nome" value="#{textForm.nome}" renderAsOutput="true" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text0a"
        label="Nome"
        value="\#{textForm.nome}"
        renderAsOutput="true" /&gt;</pre>
                <h4>Notas</h4>
                <p>Quando o atributo <code>displayValueOnly</code> é especificado com valor <code>true</code>,
                o atributo <code>label</code> torna-se opcional.</p>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Somente texto sem label (<code>renderAsOutput</code>)</h3>
            <span class="status success" />
            <z:text id="text0b" value="#{textForm.nome}" renderAsOutput="true" outputMode="true" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text0b"
        value="\#{textForm.nome}"
        renderAsOutput="true" /&gt;</pre>
                <h4>Notas</h4>
                <p>Quando o atributo <code>displayValueOnly</code> é especificado com valor <code>true</code>,
                o atributo <code>label</code> torna-se opcional.</p>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Básico</h3>
            <span class="status success" />
            <z:text id="text1" label="Nome" value="#{textForm.nome}" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text1"
        label="\Nome"
        value="\#{textForm.nome}" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Largura (<code>width</code>)</h3>
            <span class="status success" />
            <z:text id="text2" label="Nome" value="#{textForm.nome}" width="35em" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text2"
        label="\Nome"
        value="\#{textForm.nome}"
        width="35em" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Desabilitado (<code>disabled</code>)</h3>
            <span class="status success" />
            <z:text id="text3" label="Nome" value="#{textForm.nome}" width="35em" disabled="true" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text3"
        label="\Nome"
        value="\#{textForm.nome}"
        width="35em"
        disabled="true" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Obrigatório (<code>required</code>)</h3>
            <span class="status success" />
            <z:text id="text4" label="Nome" value="#{textForm.nome}" width="35em" required="true" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text4"
        label="\Nome"
        value="\#{textForm.nome}"
        required="true" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Somente-leitura (<code>readonly</code>)</h3>
            <span class="status success" />
            <z:text id="text5" label="Nome" value="#{textForm.nome}" width="35em" readonly="true" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text5"
        label="\Nome"
        value="\#{textForm.nome}"
        readonly="true" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Foco automático (<code>autofocus</code>)</h3>
            <span class="status success" />
            <z:text id="text6" label="Nome" value="#{textForm.nome}" width="35em" autofocus="false" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text6"
        label="\Nome"
        value="\#{textForm.nome}"
        autofocus="true" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Classe de estilos (<code>styleClass</code>)</h3>
            <span class="status success" />
            <z:text id="text7" label="Nome" value="#{textForm.nome}" width="35em" styleClass="especial texturizado"  />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text"
        label="\Nome"
        value="\#{textForm.nome}"
        width="35em"
        styleClass="especial texturizado" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Texto descritivo (<code>title</code>)</h3>
            <span class="status success" />
            <z:text id="text8" label="Nome" value="#{textForm.nome}" width="35em" title="Nome do colaborador" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text8"
        label="\Nome"
        value="\#{textForm.nome}"
        title="Nome do colaborador" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Texto instrutivo (<code>placeholder</code>)</h3>
            <span class="status success" />
            <z:text id="text9" label="Nome" width="35em" placeholder="Digite um nome" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text9"
        label="\Nome"
        value="\#{textForm.nome}"
        placeholder="Digite um nome" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Limite máximo de comprimento (<code>maxlength</code>)</h3>
            <span class="status success" />
            <z:text id="text10" label="Nome" value="#{textForm.nomeMaxLength}" width="10em" maxlength="10" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text1"
        label="\Nome"
        value="\#{textForm.nome}"
        width="10em"
        maxlength="10" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Limite mínimo de comprimento (<code>minlength</code>)</h3>
            <span class="status success" />
            <z:text id="text10b" label="Nome" value="#{textForm.nomeMaxLength}" width="10em" minlength="3" />
            <div class="componentUsageCode">
                <button class="componentCodeButton" type="button">Código</button>
                <pre>&lt;z:text id="text10b"
        label="\Nome"
        value="\#{textForm.nome}"
        width="10em"
        minlength="3" /&gt;</pre>
            </div>
        </div>

        <div class="componentUsageExample">
            <h3>Getters and Setters (<code>WebElement - JUnit Test</code>)</h3>
            <span class="status success" />
           	<z:text id="text11" label="Source" value="#{fieldForm.propertyBeanStr}" />
            <z:text id="text11Target" label="Target" value="#{fieldForm.getPropertyBeanStr()}" renderAsOutput="true" />
            <z:button id="btnText11Post" label="Alterar (POST)" action="#{fieldForm.submitTest()}" />
            <z:button id="btnText11Ajax" label="Atualizar campo (AJAX)" immediate="true">
                <f:ajax listener="#{fieldForm.submitByAjax('text')}" render="text11Target" />
            </z:button>
        </div>
        
        <div class="componentUsageExample">
            <h3>Limite mínimo de comprimento (<code>minlength</code>)</h3>
            <span class="status success" />
            <z:text id="text1234" label="Nome" width="10em" />
        </div>
		
		<frameset>
			<frame>
				<z:textarea renderAsOutput="true" value="#{textForm.code}" />	
			</frame>
		</frameset>
    </ui:define>

</ui:composition>